<template>
  <div>
    <video ref="videoEl" controls autoplay></video>
  </div>
</template>

<script>
import Hls from "hls.js";

export default {
  name: "VideoMonitor",
  data() {
    return {
      rtmpUrl: "rtmp://192.168.0.27:1935/live/0",
    };
  },
  mounted() {
    // this.loadVideo();
  },
  methods: {
    loadVideo() {
      const video = this.$refs.videoEl;
      if (Hls.isSupported()) {
        const hls = new Hls();
        hls.loadSource(this.rtmpUrl);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, () => {
          video.play();
        });
      } else if (video.canPlayType("application/vnd.apple.mpegURL")) {
        video.src = this.rtmpUrl;
        video.addEventListener("loadedmetadata", () => {
          video.play();
        });
      }
    },
  },
};
</script>
